<%--
  User: Shengzhao Li
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>每日日志</title>

</head>
<body>
<%--log overview page--%>
<div id="log_overview_page" data-role="page" class="page">
    <div data-role="header" data-theme="f">
        <a href="${contextPath}/m/dashboard" data-icon="home" data-direction="reverse"
           data-transition="slide">主页</a>

        <h1>每日日志</h1>
        <a href="form" data-icon="plus" data-transition="flip">记录</a>
    </div>
    <div data-role="content">
        <ul data-role="listview" id="log_view" data-inset="true" data-dividertheme="d" data-filter="true"
            data-filter-placeholder="搜索每日日志..." data-count-theme="b">
            <c:forEach items="${overviewDto.groupResults}" var="g">
                <li data-role="list-divider"><span>${g.key}</span> <span class="ui-li-count">${g.resultsSize}</span>
                </li>
                <c:forEach items="${g.results}" var="e">
                    <li>
                        <a href="details/${e.guid}" data-transition="slide">
                            <h3>
                                    ${e.logType.name}
                                <c:if test="${e.privateLog}">
                                    <img src="${contextPath}/images/mobile/lock.png" alt="private"/>
                                </c:if>
                            </h3>

                            <c:if test="${not e.user.allowEdit}">
                                <p class="color-b"><span>${e.user.showName}</span> 写的.
                                    <c:if test="${e.commentSize > 0}">
                                        <span class="gray">${e.commentSize}条评论 </span>
                                    </c:if>
                                </p>
                            </c:if>
                            <c:if test="${e.user.allowEdit and e.commentSize > 0}">
                                <p class="color-b">
                                    <span class="gray">${e.commentSize}条评论 </span>
                                </p>
                            </c:if>

                            <p>${e.content} </p>

                            <p class="ui-li-aside"><strong>${e.createTime}</strong></p>
                        </a>
                    </li>
                </c:forEach>
            </c:forEach>
            <c:if test="${empty overviewDto.groupResults}">
                <li>
                    <div class="ui-grid-a">
                        <div class="ui-block-a">还没有写任何的日志哦.
                            <a href="form" data-role="button" data-icon="plus" data-inline="true"
                               data-mini="true">开始写日志</a>
                        </div>
                        <div class="ui-block-b">&nbsp; </div>
                    </div>
                </li>
            </c:if>
        </ul>
        <c:if test="${overviewDto.showMore}">
            <div data-role="controlgroup" id="log_more_div">
                <a href="javascript:void(0);" id="log_more_link" data-role="button" class="color-b">
                    更多 (<span
                        id="page_number">${overviewDto.pageNumber}</span>/${overviewDto.totalPages})<img
                        id="more_loading" src="${contextPath}/images/public/load.gif" alt="loading" class="more-img"/>
                </a>
            </div>
        </c:if>
    </div>
    <div data-role="footer" data-position="fixed" data-theme="c">
        <div data-role="navbar">
            <ul>
                <li><a href="form" data-icon="plus" data-theme="b" data-transition="flip">记录日志</a>
                </li>
                <li><a href="type/overview" data-icon="search" data-theme="d" data-transition="flip">日志类型</a>
                </li>
                <li><a href="setting/form" data-icon="gear" data-theme="d" data-transition="flip">偏好设置</a>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        var pageNumber = ${overviewDto.pageNumber};
        var totalSize = ${overviewDto.totalSize};

        $("a#log_more_link").bind("click", function() {
            var $this = $(this).addClass("gray");
            var nextPageNumber = (++pageNumber);
            var loading = $("#more_loading").show();
            getData();
            function getData() {
                var previousLastDate = $("#log_view li[data-role='list-divider']:last span:first").html();
                $.ajax({
                    url:"overview/more",
                    data:{
                        pageNumber: nextPageNumber,
                        previousLastDate:previousLastDate,
                        totalSize: totalSize
                    },
                    success:function(data) {
                        var listview = $("#log_view").append($.trim(data)).listview("refresh");
                        $this.removeClass("gray");
                        checkShowMore(listview);
                    }
                });
            }

            function checkShowMore(listview) {
                var addedSize = listview.find("li").size();
                var listDividerSize = listview.find("li[data-role='list-divider']").size();
                if (addedSize == (totalSize + listDividerSize)) {
                    $("#log_more_div").hide();
                } else {
                    loading.hide();
                }
                $this.find("#page_number").html(nextPageNumber);
            }
        });
    </script>
</div>
</body>
</html>